<template>
    <div class="dingdan">
        <div class="d-top">
            <b>我的订单</b>
            <span>查看全部 ></span>
        </div>
        <div class="d-bottom">
            <ul class="d-list">
                <li>
                    <img src="../../assets/img/首页/个人中心/待付款.png" alt="">
                    <span>待付款</span>
                </li>
                <li>
                    <img src="../../assets/img/首页/个人中心/待发货.png" alt="">
                    <span>待发货</span>
                </li>
                <li>
                    <img src="../../assets/img/首页/个人中心/待收货.png" alt="">
                    <span>待收货</span>
                </li>
                <li>
                    <img src="../../assets/img/首页/个人中心/待评价.png" alt="">
                    <span>待评价</span>
                </li>
                <li>
                    <img src="../../assets/img/首页/个人中心/售后.png" alt="">
                    <span>退款/售后</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.dingdan{
    background-color: #fff;
    border-radius: 10px;
    margin-bottom:15px;
    .d-top{
        height:50px ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        b{
            margin-left:10px;
            letter-spacing: 2px;
        }
        span{
            margin-right:10px;
            color:#A7A7A7;
        }
    }
    .d-bottom{
        .d-list{
            display:flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 10px 0 25px 0;
            li{
                display:flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 45px;
                }
                span{
                    padding-top:5px;
                }
            }
        }
    }
}
</style>